<template>
  <div class="currency_menu_page">
    <CommonHeader title="" />
    <div class="currency_menu_content page_no_tab_bar">
      <!-- 搜索框 -->
      <div class="input_container">
        <span>
          <el-icon size="24"><Search /></el-icon>
        </span>
        <input type="text" placeholder="搜索" />
      </div>
      <!-- tab 头部1 -->
      <ul class="tab_header" v-if="false">
        <li
          v-for="(item, index) in tabList1"
          :key="index"
          @click="changeTab1(index)"
        >
          <span :class="{ actived: curHeaderIndex1 == index }">{{
            item.text
          }}</span>
          <div :class="{ border_bottom: curHeaderIndex1 == index }"></div>
        </li>
      </ul>
      <!-- tab 头部2 -->
      <ul class="tab_header tab_header2" v-if="false">
        <li
          v-for="(item, index) in tabList2"
          :key="index"
          @click="changeTab2(index)"
        >
          <span :class="{ actived: curHeaderIndex2 == index }">{{
            item.text
          }}</span>
        </li>
      </ul>
      <!-- 排序 -->
      <div class="order font_color">
        <div class="left">
          <p>
            <span>名称</span>
            <img src="@/assets/common/order_icon.png" alt="">
            <span>/成交量</span>
            <img src="@/assets/common/order_icon.png" alt="">
          </p>
        </div>
        <div class="right">
          <p>
            <span>最新价格</span>
            <img src="@/assets/common/order_icon.png" alt=""></img>
          </p>
          <p>
            <span>24h涨跌</span>
            <img src="@/assets/common/order_icon.png" alt=""></img>
          </p>
        </div>
      </div>
      <!-- tab 内容 -->
       <ul class="content_list">
        <li v-for="(item,index) in socketData"  :key="index">
          <div class="one" @click="colCoin(item.symbol)">
            <el-icon size="25" v-if="item.isColl" color="#e74257"><StarFilled /></el-icon>
            <el-icon size="25" v-else><StarFilled /></el-icon>
          </div>
          <div class="two">
            <img
              :src="`https://qhzx-kline2.oss-ap-southeast-1.aliyuncs.com/logos/${
                item.symbol.split('/')[0]
              }.png`"
              alt=""
            />
          </div>
          <div class="three">
            <div class="top">
              <p>{{ item.symbol.split("/")[0] }}<span class="font_color">/{{ item.symbol.split("/")[1] }}</span></p>
              <p class="font_color">交易量 {{ formatNum(item.volCcy24h) }}</p>
            </div>
            <div class="bot">
              <p>{{ item.last }}</p>
              <p :class="item.raf >= 0 ? 'add_color' : 'cut_color'">{{item.raf.toFixed(2)}}%</p>
            </div>
          </div>
        </li>
       </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { useStartSpotWebsocket } from "@/utils/hook/useStartSpotWebsocket";
import {formatNum} from "@/utils/common"
import { addDelColl } from "@/api/spot";

const {
  socketData,
  getAllAssort1,
} = useStartSpotWebsocket();

// 当前高亮 tab
const curHeaderIndex1 = ref(0);
const curHeaderIndex2 = ref(0);
// tab 头部列表1
const tabList1 = ref([{ text: "现货" }, { text: "合约" }, { text: "期权" }]);
// tab 头部列表2
const tabList2 = ref([{ text: "现货" }, { text: "合约" }, { text: "跟单" }]);

// 切换 tab
const changeTab1 = (index: number) => {
  curHeaderIndex1.value = index;
};
const changeTab2 = (index: number) => {
  curHeaderIndex2.value = index;
};

// 收藏币种
const colCoin = (symbol: string) => {
addDelColl({symbol}).then((res: any) => {
  getAllAssort1("1")
})
}

// 初始化数据
onMounted(()=>{
  getAllAssort1("1")
})

</script>

<style lang="scss" scoped>
.currency_menu_page {
  .currency_menu_content {
    padding-top: 10px;
    .input_container {
      display: flex;
      align-items: center;
      padding: 10px 0px;
      // background-color: #141515;
      background-color: #292929;
      border-radius: 20px;
      & > span {
        display: flex;
        align-items: center;
        margin: 0 10px;
      }
      input {
        flex: 1;
        font-size: 18px;
        padding: 0 5px;
        background-color: #292929;
        color: #ffffff;
      }
    }
    .tab_header {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      color: #babcbf;
      li {
        position: relative;
        margin-right: 30px;
        .actived {
          color: #ffffff;
        }
        .border_bottom {
          position: absolute;
          top: 28px;
          left: 50%;
          transform: translateX(-50%);
          width: 30px;
          height: 3px;
          background: linear-gradient(to right, #14da62, #0d5eae);
        }
      }
    }
    .tab_header2 {
      font-size: 14px;
    }
    .order {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0;
      div {
        p {
          display: flex;
          align-items: center;
          img {
            width: 18px;height: 18px;
          }
        }
      }
      &>.right {
        display: flex;
        justify-content: space-between;
        p {
          margin-left: 20px;
        }
      }
    }
    .content_list {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        .one,.two {
          margin: 0px 5px;
        }
        .two {
          width: 30px;
          height: 30px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .three {
          margin-left:5px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          .top,.bot {
            .font_color,.cut_color,.add_color {
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
